﻿
@{
    ViewBag.Title = "歌手列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .wrap .el-scrollbar__wrap {
        overflow-x: hidden !important;
    }
</style>
<div id="app" style="width:100%;height:100%;" class="el-main-background">
    <div style="height: 94%; width: 100%;">
        <!--搜索栏-->
        <div style="padding: 10px 10px  0 10px ;">
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-row>
                    <el-form-item label="歌手">
                        <el-input v-model="search.singer" placeholder="歌手"></el-input>
                    </el-form-item>
                    <el-form-item label="地区">
                        <el-select v-model="search.country" placeholder="--请选择--" clearable>
                            <el-option v-for="item in Country" :label="item.CountryName" :value="item.CountryId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @@click="onSearch">查询</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </div>
        <div style="height:90%;width:100%;">
            <!--表格-->
            <el-scrollbar class="wrap" style="height:100%;">
                <el-table :data="tableData" border ref="tableData" v-loading="dataLodaing" v-on:select="select" v-on:row-click="clickRow" highlight-current-row @@select-all="ifCheckOne">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column v-for="(item,index) in TableLabel" v-if="item.show && item.label!='照片'" :prop="item.prop" :label="item.label" :key="index" :width="item.width" show-overflow-tooltip >
                    </el-table-column>
                    <el-table-column v-else-if="item.show && item.label=='照片'" :prop="item.prop" :label="item.label" :key="index">
                        <template v-slot="scope">
                            <img :src="scope.row.Singer.SingerPictrue" width="80" height="80" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="EditClick(scope.row)" type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
    </div>
    <!--底部分页-->
    <footer class=" el-flooter-background">
        <el-row style="height:100%;width:100%;">
            <el-col :span="1" style="text-align:center;line-height:40px;">
                <el-checkbox v-model="selectOne">多选</el-checkbox>
            </el-col>
            <el-col :span="1.5" style="line-height:40px;">
                <el-dropdown trigger="click" :hide-on-click="false">
                    <el-button size="small">
                        选择列<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <el-checkbox :indeterminate="all" v-model="checkAll" v-on:change="CheckAllChange">全选</el-checkbox>
                        </el-dropdown-item>
                        <el-dropdown-item v-for="(item,index) in TableLabel" :key="index">
                            <el-checkbox v-model="item.show" v-on:change="itemChange">{{item.label}}</el-checkbox>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
            <el-col :span="12" style="padding-top:5px;">
                <el-pagination :current-page="pagenation.currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pagenation.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" background v-on:size-change="SizeChange" v-on:current-change="CurrentChange"
                               :total="pagenation.totalCount">
                </el-pagination>
            </el-col>
        </el-row>
    </footer>
    <el-dialog title="歌手信息" :visible.sync="dialog" :close-on-click-modal="false" center width="600px">
        <el-form :model="SingerInfo" ref="SingerInfo" label-width="160px">
            <el-form-item label="名称">
                <el-input v-model="SingerInfo.Singer.SingerName"  style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="SingerInfo.Singer.SingerAge"  style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker v-model="SingerInfo.Singer.SingerBir" type="date" placeholder="选择日期" style="width:300px;"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="SingerInfo.Singer.SingerSex" placeholder="--请选择--" clearable style="width:300px;">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地区">
                <el-select v-model="SingerInfo.Singer.SingerCountry" placeholder="--请选择--" clearable style="width:300px;">
                    <el-option v-for="item in Country" :label="item.CountryName" :value="item.CountryId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload class="avatar-uploader" :show-file-list="false" :before-upload="true" :on-change="handleChange" :auto-upload="false">
                    <img :src="SingerInfo.Singer.SingerPictrue" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="简介">
                <el-input type="textarea" v-model="SingerInfo.Singer.SingerDesc" style="width:300px;" autosize></el-input>
            </el-form-item>
        </el-form>
        <el-checkbox v-model="isClose" style="padding-bottom:10px;">停留在此窗口</el-checkbox>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" v-on:click="EditInfoBtn('SingerInfo')" :loading="loading">确 定</el-button>
            <el-button v-on:click="dialog = false">取 消</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],//表格的数据
                pagenation: {
                    currentPage: 1,
                    totalCount: 400,
                    pageSize: 15
                },//分页信息
                TableLabel: [
                    { prop: 'Singer.SingerName', label: '歌手', show: true },
                    { prop: 'Country.CountryName', label: '地区', show: true },
                    //{ prop: 'Singer.SingerAge', label: '年龄', show: true },
                    //{ prop: 'Singer.SingerSex', label: '性别', show: true },
                    //{ prop: 'Singer.SingerBir', label: '生日', show: true },
                    { prop: 'Singer.SingerRank', label: '排行', show: true },
                    { prop: 'Singer.SingerDesc', label: '简介', show: true, width: 350 },
                    { prop: 'Singer.SingerPictrue', label: '照片', show: true }
                ],//表格信息的列的信息
                all: false,//底部栏是否展示所有列
                checkAll: true,//底部栏判断全选状态
                search: {
                    country: '',
                    singer: '',
                },//过滤条件
                dialog: false,//弹出框
                SingerInfo: {
                    Singer: {
                        SingerName: '',
                        SingerAge: 0,
                        SingerSex: '1',
                        SingerCountry: '',
                        SingerBir: '',
                        SingerDesc: '',
                        SingerPictrue: '',
                    }
                },//装配工信息
                loading: false,//加载组件
                isClose: false,//是否自动关闭
                dataLodaing: false,//数据加载是加载组件
                selectOne: false,//只能选中一行
                Country: [],
                loading: false,
            }
        },
        methods: {
            getSingerTable() {
                this.dataLodaing = true;
                let params = {
                    PageSize: this.pagenation.pageSize,
                    CurrentPage: this.pagenation.currentPage,
                    singer: this.search.singer
                }
                axios.post('/Music/GetAllSinger', params).then(res => {
                    this.tableData = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                    this.dataLodaing = false;
                })
            },//获取所有列表
            CheckAllChange() {
                if (this.checkAll == false)//如果全选按钮选中了，按下则全部取消选中
                {
                    for (let i = 0; i < this.TableLabel.length; i++) {
                        this.TableLabel[i].show = false
                    }
                    this.all = false;
                }
                else {
                    for (let i = 0; i < this.TableLabel.length; i++) {
                        this.TableLabel[i].show = true
                    }
                    this.all = false;

                }
            },//全选所有列
            itemChange() {
                var count = 0;
                for (let i = 0; i < this.TableLabel.length; i++) {
                    if (this.TableLabel[i].show == true) {
                        count++;
                    }
                }
                if (count == this.TableLabel.length)//如果全部选中了 则全选按钮选中
                {
                    this.checkAll = true;
                    this.all = false;
                } else if (count === 0)//如果全部没选 则全选按钮不选择
                {
                    this.all = false;
                    this.checkAll = false;
                } else {//其余状况，全选按钮为其他
                    this.all = true;
                    this.checkAll = false;
                }
            },//显示的列改变
            SizeChange(val) {
                this.pagenation.pageSize = val
                this.getSingerTable();
            },//分页改变显示数量
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.getSingerTable();
            },//分页当前页改变
            EditClick(Info) {
                this.dialog = true;
                this.SingerInfo = Info;
            },//修改装配工信息
            onSearch() {
                this.pagenation.currentPage = 1;
                this.getSingerTable();
            },//查询
            DeleteClick(info) {
                this.$confirm('是否全部删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/Music/RemoveMusic', info).then(res => {
                        if (res.data.statusCode == 1) {
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                            this.getSingerTable();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },//删除
            EditInfoBtn(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        var timer = setTimeout(() => {
                            this.$message({
                                message: "请求超时，请刷新页面重试",
                                type: 'warning'
                            });
                            this.loading = false;
                        }, 5000);//设置定时器，5S后未登录成功，则提示登陆超时
                        axios.post('/Music/UpdateSingerInfo', this.SingerInfo.Singer).then(res => {
                            if (res.data.statusCode == 1) {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.loading = false;
                                this.getSingerTable();
                                if (this.isInfoClose == false) {
                                    this.dialog = false;
                                }
                            } else {
                                this.$message.error(res.data.message);
                                this.loading = false;
                            }
                            clearInterval(timer);
                        })

                    } else {
                        return false;
                    }
                })
            },//提交修改
            select(selection, row) {
                if (this.selectOne == false) {
                    if (selection.length > 1) {
                        let del_row = selection.shift();
                        this.$refs.tableData.toggleRowSelection(del_row, false);
                    }
                }
            },//选中表格一行时
            clickRow(row) {
                this.$refs.tableData.toggleRowSelection(row);
                if (this.selectOne == false) {
                    if (this.$refs.tableData.selection.length > 1) {
                        this.$refs.tableData.clearSelection()
                        this.$refs.tableData.toggleRowSelection(row);

                    }
                }
            },//点击表格一行时选中
            ifCheckOne() {
                if (this.selectOne == false) {
                    this.$refs.tableData.clearSelection()
                }
            },//只能选中一行
            brightenKeyword(val, keyword) {
                const Reg = new RegExp(keyword, 'i');
                if (val) {
                    const res = val.replace(Reg, `<span style="color: red;">${keyword}</span>`);
                    return res;
                }
            },//筛选变色
            handleChange(file, fileList) {
                var reader = new FileReader();//创建读取文件的方法
                var img1 = event.target.files[0];
                var imagSize = img1.size;
                if (imagSize > 1024 * 1024 * 0.2) {
                    this.$message.error("图片大小应在在200Kb以内");
                    return false;
                }
                reader.readAsDataURL(img1);//将文件已url的形式读入页面
                var that = this;
                reader.onload = function (e) {
                    that.userimgSrc = reader.result; //把图片的二进制流付给表单里面的idImage
                }
            }, //上传预览图片
        },
        created() {

        },//加载时获取按钮权限
        mounted() {
            this.getSingerTable();
            this.itemChange();
            axios.post('/Music/GetAllCountry').then(res => {
                this.Country = res.data.data
            })
        },//打开时获取信息
    })
</script>

